<template>
    <div class="my-header">
        <el-tabs v-model="data.activeName" class="demo-tabs">
            <el-tab-pane label="计算机软件著作" name="first">
                <el-form :rules="rules" ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm"
                    status-icon>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="类型说明" prop="categoryDescription">
                                <el-input placeholder="" v-model="ruleForm.categoryDescription" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="著作名称" prop="name">
                                <el-input placeholder="" v-model="ruleForm.name" style="width: 150px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="著作权人" prop="copyOwner">
                                <!-- <SelectOption :selectValue="ruleForm.copyOwner" :options="options.userAllList"
                                    @change-value="changeValue">
                                </SelectOption> -->
                                <user-list-modal
                                v-model="ruleForm.copyOwner"
                                @update:modelValue="changeValue"
                                :default-users="[]"
                                :multiple="false"
                                :devType="'platform'"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="登记号" prop="registerNo">
                                <el-input placeholder="" v-model="ruleForm.registerNo" style="width: 150px" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="开发完成日期" prop="completionDate">
                                <el-date-picker v-model="ruleForm.completionDate" type="date" placeholder="开发完成日期"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                    style="width: 150px; margin-right: 15px"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="首次发行日期" prop="firstPublicDate">
                                <el-date-picker v-model="ruleForm.firstPublicDate" type="date" placeholder="首次发行日期"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                    style="width: 150px; margin-right: 15px"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="发证日期" prop="issueDate">
                                <el-date-picker v-model="ruleForm.issueDate" type="date" placeholder="发证日期"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                    style="width: 150px; margin-right: 15px"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="取得方式" prop="acquisitionMethod">
                                <el-input placeholder="" v-model="ruleForm.acquisitionMethod" style="width: 150px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="证书存放地" prop="saveAddress">
                                <el-input placeholder="" v-model="ruleForm.saveAddress" style="width: 150px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所有权排名" prop="ownerShip">
                                <el-input type="number" :min="1" v-model="ruleForm.ownerShip" style="width: 150px" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <!-- <el-form-item label="奖励标准" prop="rewardStandards">
                                <el-input placeholder="" v-model="ruleForm.rewardStandards" style="width: 150px" />
                                
                            </el-form-item> -->
                            <el-form-item label="奖励标准" prop="rewardStandards">
                                <SelectOption :selectValue="ruleForm.rewardStandards" :options="options.jlbzList"
                                @change-value="changeValue1"> </SelectOption>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
  
<script lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import Table from '@/views/science/components/table/table.vue'
import Api from '@/views/science/api/profess'
import { useStore } from 'vuex'
import { tips } from '@/views/science/components/tips/tips'
import UserListModal from '@/views/project/components/UserListModal/index.vue';

export default {
    components: {
        SelectOption,
        Table,
        UserListModal,
    },
    emits: {
        usersChange: null,
        paramsChange: null,
        valueFlag2:null,
    },
    props: {
        fbData: {
            type: Object,
            required: true,
        },
        addFlag: {
            type: Number,
            required: true,
        }
    },
    setup(props, { emit }) {
        const store = useStore()
        const labelPosition = ref('right')
        const data = reactive({
            activeName: ref('first'),
            dialogVisible: false,
            lobarDisabled: false,
            props: {
                multiple: true,
                expandTrigger: 'hover',
                value: 'id',
                label: 'name',
                children: 'children',
                emitPath: false
            },
            mainValue: [],
            mainValue1: [],
            chooseMatterList: [],
        })

        // 弹窗中三个下拉选择
        let options = reactive({
            orgAllList: computed(() => store.state.technologyStrength.orgAllList),
            userAllList: computed(() => store.state.technologyStrength.userAllList),


            projectnameList: computed(() => store.state.technologyStrength.KJSL_DECLARATION_TYPE),
            unitnameList: computed(() => store.state.technologyStrength.KJSL_APPLYING_FOR_AWARDS1),
            roleList: computed(() => store.state.technologyStrength.roleList),
            projectSelect: computed(() => store.state.technologyStrength.projectSelect),
            // hjTypeList: computed(() => store.state.technologyStrength.KJSL_AWARD_CATEGORY),
            hjjbList: computed(() => store.state.technologyStrength.KHGL_KJSL_HJJB),
            hjTypeList: [],
            hjdjList: [],
            jlbzList: [
                {
                    id: '1',
                    itemText: '国际专利5万',
                    itemValue: 5
                },
                {
                    id: '2',
                    itemText: '发明专利2万',
                    itemValue: 2
                },
                {
                    id: '3',
                    itemText: '实用新型专利0.3万',
                    itemValue: 0.3
                },
                {
                    id: '4',
                    itemText: '计算机软件著作权0.2万',
                    itemValue: 0.2
                }
            ],
        })

        const softwarecopyrights = ref(props.fbData)

        
        // 提交表单-字段对照新增接口-然后同步
        const ruleForm = reactive({
            id:'',
            awardApplyId: '1',
            categoryDescription: '',
            name: "",
            copyOwner: '',
            copyOwnerId: '',
            registerNo: '',
            completionDate: '',
            firstPublicDate: '',
            issueDate: '',
            acquisitionMethod: '',
            saveAddress: '',
            ownerShip: '',
            rewardStandards: '',
            rewardStandardsId: '',
        }) as any

        const handleData = (data) => {
            const arr1 = Object.keys(data)
            const list = ruleForm
            for (const key in list) {
                if (arr1.indexOf(key) !== -1) {
                    list[key] = data[key]
                }
            }
            return list
        }

        if(props.fbData) Object.assign(ruleForm, handleData(props.fbData))
        

        watch(props, (newValue, oldValue) => {
            console.log(newValue)
            softwarecopyrights.value = newValue.fbData
            Object.assign(ruleForm, handleData(newValue.fbData))
        });

        watch(ruleForm, (newValue, oldValue) => {
            emit('paramsChange', newValue)
        });

        // watch(
        //     () => props.addFlag,
        //     (newVal, oldVal) => {
        //         Object.keys(ruleForm).forEach((key) => {
        //             ruleForm[key] = ''
        //         })
        //     }
        // )

        const changeValue = (item) => {
            ruleForm.copyOwner = item.cname
            ruleForm.copyOwnerId = item.userId
        }
        const changeValue1 = (item) => {
            ruleForm.rewardStandards = item.itemText
            ruleForm.rewardStandardsId = item.itemValue
        }


        // 新增
        const rules = reactive({
            categoryDescription: [
                { required: true, message: '请输入类型说明', trigger: 'change', },
            ],
            name: [
                { required: true, message: '请输入著作名称', trigger: 'change', },
            ],
            copyOwner: [
                { required: true, message: '请输入著作权人', trigger: 'change', },
            ],
            registerNo: [
                { required: true, message: '请输入登记号', trigger: 'blur' },
            ],
            completionDate: [
                { required: true, message: '请输入开发完成日期', trigger: 'change', },
            ],
            firstPublicDate: [
                { required: true, message: '请输入首次发行日期', trigger: 'change', },
            ],
            issueDate: [
                { required: true, message: '请输入发证日期', trigger: 'blur' },
            ],
            acquisitionMethod: [
                { required: true, message: '请输入取得方式', trigger: 'blur' },
            ],
            saveAddress: [
                { required: true, message: '请输入证书存放地', trigger: 'change', },
            ],
            ownerShip: [
                { required: true, message: '请输入所有权排名', trigger: 'change', },
            ],
            rewardStandards: [
                { required: true, message: '请输入奖励标准', trigger: 'blur' },
            ],
        })

        const ruleFormRef = ref()
        const submitForm = async () => {
            ruleFormRef.value.validate(valid =>{
                if (valid){
                    emit('valueFlag2', true)
                }else{
                    emit('valueFlag2', false)
                }
            })
        }

        return {
            open,
            ruleForm,
            rules,
            ruleFormRef,
            labelPosition,
            data,
            options,

            changeValue,
            changeValue1,
            submitForm,
        }
    },
}
</script>
<style lang="scss" scoped>
.personAddBtn {
    position: absolute;
    bottom: 0;
    right: 0;
}

.demo-form-inline .el-form-item {
    width: 48%;
}

:deep(.labelHeight .el-form-item__label) {
    line-height: 20px;
}

:deep(.el-date-editor.el-input) {
    width: 100%;
}

:deep(.el-date-editor.el-input__inner) {
    width: 100%;
}

:deep(.demo-form-inline .el-select) {
    width: 100%;
    margin: 0;
}

.el-select {
    width: 100%;
    margin: 0;
}

.selectLabel {
    width: 70%;
    min-height: 40px;
    line-height: 40px;
    padding: 0 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
}

.addLabel {
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #169bd5;
    border-radius: 6px;
    color: #fff;
    margin-left: 15px;
}

.unitBox {
    width: 100%;
    margin: 30px 0;

    .title {
        padding: 15px 0;
        border-bottom: 1px solid #ccc;
    }

    .tagBox {
        line-height: 40px;
        margin-top: 15px;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px 15px;
    }
}

.el-tag {
    margin-right: 10px;
}


.content-box {
    width: 250px;
    height: 33px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select {
    color: #eee;
}

.align-center {
    align-items: center;
}

.space-between {
    justify-content: space-between;
}

.mt20 {
    margin-top: 20px;
}

.flex {
    display: flex;
}

.handle {
    position: absolute;
    top: 17px;
    right: 20px;
    display: flex;
    align-items: center;
}

.search-box {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 10px;
}
</style>
  